<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是一个页面的内容
</body>
<!-- <h1>这是最高级别的标题</h1>
<h2>这是次级别的标题</h2>
<h3>这是另一个级别的标题</h3>
<h4>这是下一级别的标题</h4>
<h5>这是较低级别的标题</h5>
<!-- 以此类推，直到最低级别的标题 -->
<!-- <h6>这是最低级别的标题</h6> --> 

<p>在<em>CSS</em>中，我们通常使用像素（px）作为单位。在桌面浏览器中，
    1个CSS像素通常对应着电脑屏幕的1个物理像素，但实际上，
    CSS中的像素只是一个抽象的单位。在不同设备或环境中，
    CSS中的1px所代表的物理像素是不同的。
    <ins>
        在早期的移动设备中，S屏幕像素密度较低，
    </ins>
    一个CSS像素等于一个屏幕物理像素。
    然而，随着技术的发展，移动设备的屏幕像素密度增加，
    例如Retina屏，其中一个CSS像素可能等于两个物理像素。</p>
<p>在移动端浏览器中，以及某些桌面浏览器中，
    window对象的<i>devicePixelRatio属性</i>表示设备物理像素和设备独立像素
    的比例。<u>设备独立像素可以看作是CSS像素。</u>例如，在Retina屏的iPhone上，
    devicePixelRatio的值为2，表示1个CSS像素相当于2个物理像素。
    但要注意，devicePixelRatio在不同浏览器中存在兼容性问题，
    因此需要谨慎使用。用户缩放页面也会影响CSS中1px所代表的物理像素，
    放大页面会增加，缩小页面会减少。</p>

<!--我是一条注释-->
</html>